<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery.min.js"></script>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        table td{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <h1>2048小游戏</h1>
    <table border="1px" style="background-color:greenyellow">
        <tr>
            <td><div class="box"></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
        </tr>
        <tr>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
        </tr>
        <tr>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
        </tr>
        <tr>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
            <td><div class=""></div></td>
        </tr>
    </table>
    
</body>
<script>
    $(function(){
        var x=0,y=0;
        $(window).keydown(function(e){
            console.log(e.key+"--"+e.keyCode)
            if(e.keyCode==38 && y!=0){
                //上    
                y=y-320;
            }
            if(e.keyCode==40 && y!=320){
                //下
                y=y+320;
            }
            if(e.keyCode==37 && x!=0){ 
                //左
                x=x-320;
            }
            if(e.keyCode==39 && x!=320){
                //右
                x=x+320;     
            }
            $(".box").css({
                    "transform":"translate("+x+"px,"+y+"px)",
            })
            
        })
    });
</script>
</html>